import Nano, {Component, Fragment, Img} from 'nano-jsx'
import {Context} from '../../Context'
import {i18n, sentenceKey} from '../../i18n'
import {Platform} from '../../Types'
import {systemUser} from '../../Utils'
import {pluginVersion} from '../../utils/versions/PluginVersion'

const platformName: (Platform) => string = platform => {
    if (platform == Platform.win32) {
        return 'Windows'
    } else if (platform == Platform.darwin) {
        return 'macOS'
    } else if (platform == Platform.linux) {
        return 'Linux'
    } else {
        return 'Unknown Version'
    }
}

export interface InformationCardProps {
    context: Context
    platform: Platform
}

export interface InformationCardState {
    avatar: string
    username: string
    version: string
    pluginVersion: string
    systemUser: string
    nativeId: string
}

export class InformationCard extends Component<InformationCardProps, InformationCardState> {
    constructor(props: InformationCardProps) {
        super(props)

        this.state = {
            avatar: utools.getUser()?.avatar ?? '',
            username: utools.getUser()?.nickname ?? 'Unknown User',
            version: utools.getAppVersion(),
            pluginVersion: pluginVersion,
            systemUser: systemUser(),
            nativeId: utools.getNativeId(),
        }
    }

    override render() {
        return (
            <Fragment>
                <div
                    id="information-card"
                    class="gap"
                />
                <div class="gap"/>
                <div class="form-item information-card card">
                    <div class="card-header">
                        <Img
                            class={`icon ${this.props.context.enableRoundRound ? 'round-round' : ''}`}
                            src={this.state.avatar}
                        />
                        <span class="title">{this.state.username}</span>
                    </div>
                    <div class="card-body">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <div class="col-3 col-sm-12">
                                    <label
                                        class="form-label label-sm"
                                        for="utools-version"
                                    >
                                        {i18n.t(sentenceKey.utoolsVersion)}
                                    </label>
                                </div>
                                <div class="col-9 col-sm-12">
                                    <input
                                        class="form-input input-sm"
                                        type="text"
                                        id="utools-version"
                                        value={this.state.version}
                                        readonly
                                    />
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-3 col-sm-12">
                                    <label
                                        class="form-label label-sm"
                                        for="plugin-version"
                                    >
                                        {i18n.t(sentenceKey.pluginVersion)}
                                    </label>
                                </div>
                                <div class="col-9 col-sm-12">
                                    <input
                                        class="form-input input-sm"
                                        type="text"
                                        id="plugin-version"
                                        value={this.state.pluginVersion}
                                        readonly
                                    />
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-3 col-sm-12">
                                    <label
                                        class="form-label label-sm"
                                        for="system-version"
                                    >
                                        {i18n.t(sentenceKey.systemVersion)}
                                    </label>
                                </div>
                                <div class="col-9 col-sm-12">
                                    <input
                                        class="form-input input-sm"
                                        type="text"
                                        id="system-version"
                                        value={platformName(this.props.platform)}
                                        readonly
                                    />
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-3 col-sm-12">
                                    <label
                                        class="form-label label-sm"
                                        for="system-user"
                                    >
                                        {i18n.t(sentenceKey.systemUser)}
                                    </label>
                                </div>
                                <div class="col-9 col-sm-12">
                                    <input
                                        class="form-input input-sm"
                                        type="text"
                                        id="system-user"
                                        value={this.state.systemUser}
                                        readonly
                                    />
                                </div>
                            </div>
                            <div
                                class="form-group tooltip tooltip-bottom"
                                data-tooltip={i18n.t(sentenceKey.nativeIdDesc)}
                            >
                                <div class="col-3 col-sm-12">
                                    <label
                                        class="form-label label-sm"
                                        for="native-id"
                                    >
                                        {i18n.t(sentenceKey.nativeId)}
                                    </label>
                                </div>
                                <div class="col-9 col-sm-12">
                                    <input
                                        class="form-input input-sm"
                                        type="text"
                                        id="native-id"
                                        value={this.state.nativeId}
                                        readonly
                                    />
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </Fragment>
        )
    }
}
